body {
  margin: 0px;
  color: #fff;
  background-color: #000;
}

/* 下方固定导航菜单 */
.bottom-nav {
  position: fixed;
  bottom: 0px;
  right: 0px;
  left: 0px;
  background-color: #111;
  text-align: center;

  display: flex;
  justify-content: space-around;

  padding: 0.2rem 0px 0.5rem 0px;
}

.bottom-nav img {
  width: 2.5rem;
  /* 高宽比 */
  aspect-ratio: 1 / 1;
}

.active {
  color: #08c060;
}

/* 上方第一行菜单样式 */
.top-nav {
  text-align: center;
  position: relative;
}

.top-nav img {
  width: 1.2rem;
  aspect-ratio: 1 / 1;
}

/*  
  :last-of-type表示最后一个对应类型的元素
  :first-of-type表示第一个对应类型的元素 
 */
.top-nav > div:last-of-type {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 0.8rem 1rem;
}

.top-nav > div:first-of-type {
  padding: 0.8rem 1rem;
}

.img1 {
  margin-right: 1rem;
  transform: scale(1.2);
}

/* 聊天信息整体区域 */
.main-box {
  background-color: #111;
}

/* 单个聊天信息区域 */
.logo {
  width: 3rem;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  margin: 0.5rem;
}

.chat-box {
  display: flex;
}

.chat-line01 {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0.5rem;
}

.chat-box-info {
  flex: 1;
  border-bottom: 1px solid #222;
}

.chat-time {
  font-size: 0.7rem;
  color: #888;
}

.jy {
  width: 0.8rem;
  aspect-ratio: 1 / 1;
}

.chat-box-line02 {
  display: flex;
  justify-content: space-between;
  color: #888;
  font-size: 0.8rem;
  margin: 0.5rem 0.5rem;
}
